<style scoped lang="scss">
.box {
  background: #ececec;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  user-select: none;
  width: 100vw;
  overflow: hidden;
}

.main {

  h2 {
    background-color: #fff;
    width: 100%;
    padding: 10px;
  }

  dl {
    background-color: #fff;
    border-radius: 10px;
    margin: 10px;
    display: flex;
    padding: 5px;


    dd {
      margin-left: 10px;

      .doctor {
        display: flex;
        align-items: center;

        p {
          padding: 5px;
        }

        span {
          font-size: 8px;
          background-color: rgb(1, 180, 136);
          color: #fff;
          padding: 2px;
          border-radius: 2px;
        }
      }

      .classitem {
        font-size: 12px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 5px;
        align-items: center;

        .divitem:last-child {
          border-right: none;
        }

        .divitem {
          width: 33%;
          display: flex;
          height: 20px;
          align-items: center;
          text-align: center;
          border-right: 1px solid #ccc;
          font-size: 10px;

          span {
            color: rgb(250, 100, 0);
            margin-left: 3px;

          }
        }
      }

      .money {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .moneyitem {
          display: flex;
          align-items: center;

          span {
            font-size: 12px;
            color: rgb(250, 100, 0);
          }

          p {
            font-size: 20px;
            color: rgb(250, 100, 0);
            padding: 3px;
          }

          span:last-child {
            color: rgb(89, 89, 89);
          }
        }
      }
    }
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  font-size: 14px;
}

.tab {
  margin: 5px;
  padding: 5px;
  margin-left: 10px;
  width: 20%;
  background-color: rgb(240, 245, 253);
  border-radius: 50px;
  text-align: center;
  color: rgb(37, 115, 254);
}

.active {
  background-color: rgb(30, 112, 255);
  color: #fff;
}

.content {
  background-color: #fff;
  padding: 10px;
}

.mian-title {
  line-height: 35px;
  font-size: 12px;
  text-align: center;
  color: rgb(30, 112, 255);
}

.shanXuan {
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  background-color: #fff;
  padding: 10px;
  font-size: 14px;

  .divItem {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #fff;

    img {
      width: 10px;
      height: 10px;
    }
  }
}

.box1 {
  width: 100vw;
  height: 100vh;
  display: flex;
  color: #000;
  font-size: 14px;
}

.left {
  width: 200px;
  background-color: rgb(247, 248, 250);
  height: 100vh;
  overflow-y: scroll;

  li {
    line-height: 50px;
    padding: 0 10px;

  }

  .active {
    border-left: 3px solid rgb(30, 111, 255);
    background-color: #fff;
    color: #000;
  }
}

.right {
  flex: 1;
  height: 100vh;
  overflow-y: scroll;

  li {
    line-height: 50px;
    padding: 0 10px;
  }

  .active1 {
    color: rgb(30, 111, 255);
  }
}

.box2 {
  width: 100vw;
  height: 100%;
  display: flex;

  .left {
    flex: 8;
    height: 100%;

    overflow-y: scroll;

    div {
      width: 100%;
    }
  }

  .right {
    height: 100%;
    overflow-y: scroll;
    flex: 7;

    div {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 46px;
      align-items: center;
    }
  }
}

.activeIndex {
  background: #ccc;
}

.buttonbox {
  display: flex;
  flex-direction: column;
  height: 600px;

  p {
    line-height: 50px;
    text-align: center;
    width: 100%;
  }
}
</style>
<template>
  <div class="box">
    <van-search v-model="value" background="#fff" placeholder="请输入搜索关键词" @click="router.push('/search')" />
    <div class="main">
      <h2>热门科室</h2>
      <div class="tabs">
        <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
          @click="tabClick(tab, index)">
          {{ tab }}
        </div>
      </div>
      <div class="shanXuan">
        <div class="divItem" @click="show = true">
          <p>{{ showKe ? '全部科室' : data.admin }}</p><img src="../../../assets/img/下拉.png" alt="">
        </div>
        <div class="divItem" @click="show1 = true">
          <p>{{ showG ? '全国' : data.city }}</p><img src="../../../assets/img/下拉.png" alt="">
        </div>
        <div class="divItem" @click="show2 = true">
          <p>默认排序</p><img src="../../../assets/img/下拉.png" alt="">
        </div>
      </div>
      <!-- 虚拟列表组件 -->
      <div style="height: 420px;overflow: hidden;">
        <virtual-list :list="ListData" @scroll-top="scroll" @doctor-list="doctorList"></virtual-list>
      </div>
    </div>
    <van-action-sheet v-model:show="show" @select="onSelect">
      <div class="box1">
        <div class="left">
          <li v-for="(v, i) in KeshiTap" :key="i" @click="headeTap(v, i)" :class="cunter === i ? 'active' : ''">{{ v
            }}
          </li>
        </div>
        <div class="right">
          <li v-for="(v, i) in KeShi" :key="i" @click="headeTap1(v, i)" :class="cunter1 === i ? 'active1' : ''">{{ v
            }}
          </li>
        </div>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show1" @select="onSelect">
      <div class="box2">
        <div class="left">
          <van-sidebar v-model="active">
            <van-sidebar-item v-for="(item, index) in areaList.province_list" :key="index" :title="item"
              @click="getCity(index)">
            </van-sidebar-item>
          </van-sidebar>
        </div>
        <div class="right">
          <div v-for="(v, i) in arr1" :key="i" :class="{ activeIndex: currentIndexcity == i }">
            <div @click="Quanguo(v, i)">{{ v }}</div>
          </div>
        </div>
      </div>
    </van-action-sheet>
    <van-action-sheet v-model:show="show2" @select="onSelect">
      <div class="buttonbox">
        <p @click="MoRen()">默认排序</p>
        <p @click="asd('1')">好评从高到低</p>
        <p @click="JieZhen('2')">接诊人次从多到少</p>
        <p @click="XiangYin('3')">响应时间</p>
      </div>
    </van-action-sheet>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { ListDatagete } from '../../../Type/indeType';
// @ts-ignore
import VirtualList from '../../../components/VirtualList/VirtualList.vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { areaList } from '@vant/area-data'
const showG = ref(true)
const value = ref('');
const router = useRouter()
const listTap = ref([
  '妇产科',
  '儿科',
  '皮肤科',
  '消化内科',
  '呼吸内科',
  '麻醉科',
  '泌尿科',
  '内分泌科',
])
const citytext = ref('')
const doctorbrowse = ref('')
const data = ref({
  pageCode: 1,
  pageSize: 10,
  admin: '妇产科',
  city: citytext.value,
  tag: doctorbrowse.value,
  order: 'desc',
})
// 默认排序
const MoRen = () => {
  data.value.tag = ''
  data.value.order = ''
  getData1()
  show2.value = false
}
// 好评率排序
const asd = (e: string) => {
  data.value.tag = e
  data.value.order = data.value.order == 'desc' ? 'asc' : 'desc'
  getData1()
  show2.value = false
}
// 接诊人数排序
const JieZhen = (e: string) => {
  data.value.tag = e
  data.value.order = data.value.order == 'desc' ? 'asc' : 'desc'
  getData1()
  show2.value = false
}
// 响应时间排序
const XiangYin = (e: string) => {
  data.value.tag = e
  data.value.order = data.value.order == 'desc' ? 'asc' : 'desc'
  getData1()
  show2.value = false
}

const getData = () => {
  axios.get('/api/doctor/list', { params: data.value }).then(res => {
    ListData.value = [...ListData.value, ...res.data.data]
    res.data.data.forEach((item: any) => {
      item.doctorbrowse = item.doctorbrowse + 1
      doctorbrowse.value = item.doctorbrowse
    })
  })
}
getData()

const ListData = ref<ListDatagete[]>([])
const currentIndex = ref(0);
const DataTab = ref('')

const tabClick = (tab: string, index: number) => {
  currentIndex.value = index
  data.value.admin = tab
  DataTab.value = tab
  getData1()
}

const getData1 = () => {
  axios.get('/api/doctor/list', { params: data.value }).then(res => {
    ListData.value = res.data.data
  })
}
const doctorList = (item: ListDatagete) => {
  axios.post('/api/doctor/browse', { id: item.doctorid })
  router.push('/doctordetail?id=' + item.doctorid)
}
const show = ref(false);
const showKe = ref(true);

// 虚拟列表
const arr = ref<number[]>([])
const scroll = (e: string) => {
  if (Number(e.replace('px', '')) % 1000 === 0 && Number(e.replace('px', '')) !== 0) {
    if (!arr.value.includes(Number(e.replace('px', '')))) {
      arr.value.push(Number(e.replace('px', '')))
      data.value.pageCode++
      getData()
    }
  }
}
const onSelect = (item: { name: string }) => {
  show.value = false;
  showToast(item.name);
};
const KeshiTap = ref([])
const KeShi = ref([])
const TextTap = ref('')
const cunter = ref(0)
const cunter1 = ref(-1)
axios.get('/api/office/list').then(res => {
  res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
    KeshiTap.value.push(item.adminname as never)
    KeshiTap.value = [...new Set(KeshiTap.value)].reverse()
    if (item.adminname === '全部') {
      KeShi.value.push(item.adminchildrenname as never)
    }
  })
})
const headeTap = (v: string, index: number) => {
  TextTap.value = v
  cunter.value = index
  axios.get('/api/office/list').then(res => {
    KeShi.value = []
    res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
      if (item.adminname === v) {
        KeShi.value.push(item.adminchildrenname as never)
      }
    })
  })
}
const headeTap1 = (v: string, index: number) => {
  data.value.admin = v
  cunter1.value = index
  show.value = false
  showKe.value = false
  getData1()
}
// 城市
const show1 = ref(false);
const currentIndexcity = ref(0)

const active = ref(0)
const arr1 = ref<string[]>(['北京市'])
const getCity = (v: string) => {
  arr1.value = []
  for (const key in areaList.city_list) {
    if (v.slice(0, 2) == key.slice(0, 2)) {
      arr1.value.push(areaList.city_list[key])
    }
  }
}
// 城市
const Quanguo = (v: string, i: number) => {
  currentIndexcity.value = i
  citytext.value = v
  showG.value = false
  if (v == '全部') {
    v = ''
  }
  show1.value = false
  data.value.city = v
  getData1()
}
// 排序
const show2 = ref(false)
</script>
